<template>
    <div class="app">
        <mt-swipe :show-indicators="false">
            <mt-swipe-item><img src="../img/bann4.jpg" alt="" class="bann"></mt-swipe-item>
            <mt-swipe-item><img src="../img/bann4.jpg" alt="" class="bann"></mt-swipe-item>
            <mt-swipe-item><img src="../img/bann4.jpg" alt="" class="bann"></mt-swipe-item>
        </mt-swipe>
        <div class="hot">
            <span>——</span> 
            <span style="color:red;margin-left:5px">HOT</span> 只要绝配
            <span style="margin-left:5px;">——</span>
        </div>
        <div class="pro">
            <div class="left" @click="week()">
                <span><img src="../img/te11.png" alt="" style="width:170px;position:absolute;"></span>
                <img src="../img/te.png" alt="" style="width:100%;">
                <p class="unte">本周特惠 <br>unte all originals</p>

            </div>
            <div class="left" @click="news()">
                    <span><img src="../img/te22.png" alt="" style="width:170px;position:absolute;"></span>
                <img src="../img/te2.png" alt="" style="width:100%;">
                <p class="unte">新品速递 <br>unte all originals</p>
            </div>
        </div>
        <div class="pro">
                <div class="left" @click="hot()">
                    <span><img src="../img/te22.png" alt="" style="width:170px;position:absolute;"></span>
                    <img src="../img/te3.png" alt="" style="width:100%;">
                    <p class="unte">品牌热卖 <br>unte all originals</p>
                </div>
                <div class="left" @click="carou()">
                        <span><img src="../img/te11.png" alt="" style="width:170px;position:absolute;"></span>
                    <img src="../img/te4.png" alt="" style="width:100%;">
                    <p class="unte">精品选购 <br>unte all originals</p>
                </div>
        </div>
        <div class="hot">
            <span>——</span> 
            <span style="color:#f0f;margin-left:5px">NEW</span> 主推尖货
            <span style="margin-left:5px;">——</span>
        </div>
        <div class="product">
            <div v-for="(item,i) of list" :key="i">
                <img :src="`http://127.0.0.1:3000/`+item.path" class="p1" @click="pid(item.pid)">
                <p class="title">{{item.title}}</p>
                <p class="title" style="margin-top:-10px;color:red;">￥{{item.price}}</p>
                <p class="title" style="margin-top:-10px;">已售出{{item.online}}/0人评论</p>
            </div>
        </div>
        <div style="font-size:14px;text-align: center;margin-top:10px;color:#666;">
            <span>—</span>
            <span style="margin:0 10px;">已经到底啦</span>
            <span>—</span>
        </div>
        <div style="width:100%;height:80px;"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:[],
        }
    },
    methods: {
        loadMove(){
             let url="index";
             let obj={};
             this.axios.get(url,{params:obj}).then(result=>{
                 let rows=this.list.concat(result.data.data);
                 this.list=rows;
             })
         },
         pid(id){
             console.log("当前商品ID"+`${id}`)
         },
        week(){
            this.$router.push({path:"/benzhou"})
        },
        hot(){
            this.$router.push({path:"/benzhou"})
        },
        news(){
            this.$router.push({path:"/benzhou"})
        },
        carou(){
            this.$router.push({path:"/benzhou"})
        },
    },
    created(){
        this.loadMove()
    },
}
</script>
<style scoped>
.unte{
    position:absolute;
    z-index:100;
    top:46px;
    left:34px;
    text-align:center;
    color:#fff;
    font-size:14px;
}
    .mint-swipe{
        height:250px;
    }
    .hot{
        margin-left:24%;
        margin-top:10px;
        font-size:14px;
    }
    .pro{
        margin-top:5px;
        display: flex;
        justify-content: space-around;
    }
    .left{
        width:170px;
        height:170px; 
        position:relative;
    }
    .product{
        margin-top:10px;
        display: flex; 
        justify-content: space-around;
        flex-wrap:wrap;
    }
    .p1{
        width:170px;
        height:165px;
        margin-bottom:-7px;
    }
    .title{
        font-size:14px;
    }
</style>